<script>
    import {AppShell, Header, Navbar} from '@svelteuidev/core';
    import HeadContent from './HeadContent.svelte';
    import NavContent from './NavContent.svelte';

    let isDark = false;
    let opened = false;

    function toggleTheme() {
        isDark = !isDark;
    }
    function toggleOpened() {
        opened = !opened;
    }
</script>

<AppShell>
    <Navbar slot="navbar" hidden={!opened}>
        <NavContent />
    </Navbar>
    <Header slot="header">
        <HeadContent />
    </Header>

    <slot>This is the main content</slot>
</AppShell>